<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:pe="http://primefaces.org/ui/extensions"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">Quản trị website</ui:define>
    <ui:define name="idleMonitor">
        <h:form id="monitorForm" prependId="false">
            <p:idleMonitor timeout="#{editorBean.conversation.getTimeout()}" onidle="idleDialog.show();" 
                           onactive='window.location = "editor.jsf";' rendered="#{!editorBean.conversation.isTransient()}"/>

            <p:dialog header="Thông báo" resizable="false" widgetVar="idleDialog" modal="true" width="400">
                <h:outputText value="Phiên làm việc trên trang này đã hết hạn" />
            </p:dialog>
        </h:form>
    </ui:define>
    <ui:define name="dialog">
        <h:form id="createNodeForm">
            <p:dialog header="Tạo mới" widgetVar="createNodeDialog" resizable="false">
                <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content" 
                             columns="2" cellpadding="5" width="300px">                                         
                    <h:outputLabel for="nodeName" style="display: inline; float: right; padding-right: 5px;" value="Tên node *"/>
                    <p:inputText id="nodeName" value="#{editorBean.createdNodeName}" maxlength="50" required="true"
                                 label="Tên node" requiredMessage="Yêu cầu nhập tên node"/>
                    
                    <h:outputLabel for="nodeType" style="display: inline; float: right; padding-right: 5px;" value="Loại node *"/>
                    <p:selectOneRadio id="nodeType" value="#{editorBean.createdNodeType}">
                        <f:selectItem itemLabel="File" itemValue="File"/>
                        <f:selectItem itemLabel="Thư mục" itemValue="Directory"/>
                    </p:selectOneRadio>

                    <h:outputLabel value=""/>
                    <p:commandButton value="Tạo" update=":siteTreeForm :mainForm:msgs" oncomplete="createNodeDialog.hide()"
                                     actionListener="#{editorBean.createNodeAction()}"/>
                </h:panelGrid>
            </p:dialog>
        </h:form>
        
        <h:form id="renameNodeForm">
            <p:dialog header="Đổi tên" widgetVar="renameNodeDialog" resizable="false">
                <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content" 
                             columns="2" cellpadding="5" width="300px">                                         
                    <h:outputLabel for="nodeNewName" style="display: inline; float: right; padding-right: 5px;" value="Tên mới *"/>
                    <p:inputText id="nodeNewName" value="#{editorBean.nodeNewName}" maxlength="50" required="true"
                                 label="Tên mới" requiredMessage="Yêu cầu nhập tên mới"/>

                    <h:outputLabel value=""/>
                    <p:commandButton value="Lưu" update=":siteTreeForm :mainForm:msgs" oncomplete="renameNodeDialog.hide()"
                                     actionListener="#{editorBean.renameNodeAction()}"/>
                </h:panelGrid>
            </p:dialog>
        </h:form>
        
        <h:form id="uploadForm" enctype="multipart/form-data">
            <p:dialog header="Upload File" widgetVar="uploadFileDialog" resizable="false">
                <p:fileUpload fileUploadListener="#{editorBean.fileUploadAction}"  
                              mode="advanced"
                              update=":siteTreeForm :mainForm:msgs"
                              multiple="true"
                              sizeLimit="1000000"
                              allowTypes="/(\.|\/)(gif|jpe?g|png|html|css|js)$/"
                              oncomplete="uploadFileDialog.hide()"/>
            </p:dialog>
        </h:form>
    </ui:define>
    <ui:define name="leftLayout">
        <p:layoutUnit position="west" header="Sites" size="250" resizable="true" collapsible="true">
            <ui:include src="/site/explorer.xhtml"/>
        </p:layoutUnit>
    </ui:define>
    <ui:define name="content">
        <h:form id="mainForm">
            <p:panel header="Chỉnh sửa website">
                <p:messages id="msgs"/>
                <p:graphicImage value="/image?path=#{editorBean.selectedImagePath}" width="100%"
                                rendered="#{editorBean.selectedImagePath != null and editorBean.selectedImagePath.length() > 0}">
                </p:graphicImage>
                <p:tabView cache="false" dynamic="true"
                           rendered="#{editorBean.selectedDocumentContent != null}">
                    <p:ajax event="tabChange" update="codeEditor"/>
                    <p:tab id="visualTab" title="Chế độ giao diện">
                        <p:panel style=" margin-top: 5px;">
                            <pe:ckEditor id="visualEditor" value="#{editorBean.selectedDocumentContent}" checkDirtyInterval="0" width="800" skin="v2"
                                         rendered="#{editorBean.selectedDocumentContent != null}">  
                                <p:ajax event="save" listener="#{editorBean.saveDocumentAction()}" update="visualEditor"/>  
                            </pe:ckEditor> 
                        </p:panel>
                    </p:tab>
                    <p:tab id="codeTab" title="Chế độ mã nguồn">
                        <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                            <p:toolbarGroup align="left">  
                                <p:commandButton value="Lưu file" actionListener="#{editorBean.saveDocumentAction()}"
                                                 update="codeEditor"/>
                            </p:toolbarGroup>
                        </p:toolbar>
                        <p:panel style=" margin-top: 5px;">
                            <pe:codeMirror id="codeEditor" theme="eclipse" mode="#{editorBean.selectedDocumentMimeType}"
                                           value="#{editorBean.selectedDocumentContent}" lineNumbers="true"/>
                        </p:panel>
                    </p:tab>
                </p:tabView>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>
